import React from 'react'
import { useNavigate } from 'react-router-dom'
import TopNavbar from '../../components/TopNavbar'
import ErrorBoundary from '../../components/ErrorBoundary'
import styles from './index.module.css'

const Credit = () => {
  const navigate = useNavigate()

  return (
    <div className={styles.creditPage}>
      <ErrorBoundary>
        <TopNavbar
          title="信用守约"
          showBack={true}
          onBack={() => navigate(-1)}
        />
      </ErrorBoundary>
      
      <div className={styles.content}>
        <div className={styles.creditCard}>
          <div className={styles.creditScore}>
            <div className={styles.scoreNumber}>850</div>
            <div className={styles.scoreLabel}>信用分</div>
          </div>
          <div className={styles.creditLevel}>优秀</div>
        </div>
        <div className={styles.creditInfo}>
          <div className={styles.infoItem}>
            <span className={styles.infoLabel}>守约次数：</span>
            <span className={styles.infoValue}>28次</span>
          </div>
          <div className={styles.infoItem}>
            <span className={styles.infoLabel}>违约次数：</span>
            <span className={styles.infoValue}>0次</span>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Credit
